<template>
  <div id="index">
    <div class="box">
      <div class="box-title">
        {{ title }}
        <div class="item right date">
          数据截止至：2020-09-24
        </div>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" class="card-item">
            <info-card
              :title="cards1.title"
              :data="baseData.qiyeNum"
              :data-unit="cards1.dataUnit"
              type="warn"
              :img="cards1.img"
            />
          </el-col>
          <el-col :span="6"  class="card-item">
            <info-card
              :title="cards2.title"
              :data="baseData.getiNum"
              :data-unit="cards2.dataUnit"
              type="danger"
              :img="cards2.img"
            />
          </el-col>
          <el-col :span="6"  class="card-item">
            <info-card
              :title="cards3.title"
              :data="baseData.allNum"
              :data-unit="cards3.dataUnit"
              type="info"
              :img="cards3.img"
            />
          </el-col>
          <el-col :span="6"  class="card-item">
            <info-card
              :title="cards4.title"
              :data="baseData.originalNum"
              :data-unit="cards4.dataUnit"
              type="purple"
              :img="cards4.img"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="box box-margin-top-1">
      <div class="box-title">
        平台线索数据概览
        <div class="item right date">
          数据截止至：2020-10-06
        </div>
      </div>
      <div class="clue-tab-box">
        <clue-tab
          icon="iconzhuanlixinxi"
          color="#DC4646"
          title="企业专利数"
          :description="baseData.zhuanliNum"
        />
        <clue-tab
          icon="icontrademarkshangbiaofuwu"
          color="#C379E2"
          title="商标线索数"
          :description="baseData.shangbiaoNum"
        />
        <clue-tab
          icon="iconjiaoyiguanliicon"
          color="#128BED"
          title="B2B榜单数"
          :description="baseData.b2bNum"
        />
        <clue-tab
          icon="iconshuju"
          color="#63B6F8"
          title="百度竞价数"
          :description="baseData.jingjiaNum"
        />
        <clue-tab
          icon="iconzhishu1"
          color="#29BB74"
          title="中标线索数"
          :description="baseData.zhongbiaoNum"
        />
        <clue-tab
          icon="iconzhaopinrenshi"
          color="#F8AE04"
          title="招聘线索数"
          :description="baseData.zhongbiaoNum"
        />
        <clue-tab
          icon="iconbaidu"
          color="#FF973A"
          title="百度介绍数"
          :description="baseData.jieshaoNum"
        />
        <clue-tab
          icon="iconzhandianwangzhanhulianwangie"
          color="#FF6867"
          title="站点线索数"
          :description="baseData.xinwenNum"
        />
      </div>
    </div>
    <div class="box box-margin-top-1">
      <div class="box-title">
        {{ map.title }}
      </div>
      <div class="map-div">
        <map-com />
      </div>
    </div>
    <div class="box box-margin-top-1">
      <div class="box-title">
        平台收录企业行业分布
      </div>
      <g2Example2 />
    </div>
  </div>
</template>

<script>
import infoCard from "@/components/infoCard";
import CompanyIcon from "@/assets/img/company.png";
import TianChong from "@/assets/img/tianchong.png";
import LianXian from "@/assets/img/lianxian.png";
import PaiXingBang from "@/assets/img/paixingbang.png";
import ClueTab from "./components/ClueTab";
import mapCom from "./components/mapNew";
import g2Example2 from "./components/g2Example2"
import { base } from "@/api"

export default {
  components: {
    infoCard,
    ClueTab,
    mapCom,
    g2Example2
  },
  data() {
    return {
      map: {
        title: "平台收录地域分布"
      },
      title: "平台数据总览",
      cards1: {
        title: "收入企业数（含个体）",
        data: 0,
        dataUnit: "家",
        img: CompanyIcon
      },
      cards2: {
        title: "收入企业数（不含个体）",
        data: 0,
        dataUnit: "家",
        img: TianChong
      },
      cards3: {
        title: "全部索引量",
        data: 0,
        dataUnit: "条",
        img: LianXian
      },
      cards4: {
        title: "原始抓取数据量",
        data: 0,
        dataUnit: "条",
        img: PaiXingBang
      },
      baseData: {
        qiyeNum: 0,
        getiNum: 0,
        allNum: 0,
        originalNum: 0,
        zhuanliNum: 0,
        shangbiaoNum: 0,
        b2bNum: 0,
        jingjiaNum: 0,
        zhongbiaoNum: 0,
        jieshaoNum: 0,
        xinwenNum: 0
      },
    }
  },
  created() {
    this.getBase()
  },
  methods: {
    getBase() {
      base(response => {
        this.baseData = response.data
      })
    }
  }
};
</script>
<style lang="scss">
.date {
  color: #919396;
  font-size: 12px;
  font-weight: 400;
}
.clue-tab-box {
  display: flex;
  justify-content: flex-start;
  width: 1224px;
  flex-wrap: wrap;
}
.card-item{
  min-width: 220px;
  margin-bottom:10px;
}
.box-margin-top-1 {
  margin: 1rem 0;
}
</style>
